<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Server</title>
</head>
<body>
    <h1>Server</h1>
    <div>
        <div>
            <input type="hidden" value="{{response_type}}" id="response_type">
            <input type="hidden" value="{{client_id}}" id="client_id">
            <input type="hidden" value="{{redirect_uri}}" id="redirect_uri">
            <input type="hidden" value="{{scope}}" id="scope">
            <input type="hidden" value="{{state}}" id="state">
        </div>
        <div>
            <input type="text" id="username">
        </div>
        <div>
            <input type="text" id="password">
        </div>
        <div>
            <button id="loginBtn">同意授权</button>
        </div>
    </div>
    
    <script defer>
        let loginBtn = document.getElementById('loginBtn');
        let response_type = document.getElementById('response_type').value;
        let client_id = document.getElementById('client_id').value;
        let redirect_uri = document.getElementById('redirect_uri').value;
        let scope = document.getElementById('scope').value;
        let state = document.getElementById('state').value;
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        loginBtn.addEventListener('click', function(e){
            let url = `/oauth/do_login`;
            let jsonData = {
                response_type : response_type,
                client_id : client_id,
                redirect_uri : redirect_uri,
                scope : scope,
                state : state,
                username : username.value,
                password : password.value
            };
            fetch(url,{
                method: 'POST',
                credentials: 'include',
                headers: {
                　　'Content-Type': 'application/json;charset=UTF-8',
                    "X-CSRFtoken": getCookie("csrftoken"),
                },
                body:JSON.stringify(jsonData),
            }).then((res) => {
                return res.text();
            }).then((res) => {
                if(res) {
                    jsonData = JSON.parse(res);
                    let href = jsonData.redirect_uri+"?code="+ jsonData.auth_code+"&state="+ jsonData.state;
                    location.href = href;
                }
            });
        }, false);

        //获取cookie
        function getCookie(name) {
            var cookieName = encodeURIComponent(name) + '=';
            var cookieStart = document.cookie.indexOf(cookieName);
            var cookieValue = null;
            if (cookieStart > -1) {
                var cookieEnd = document.cookie.indexOf(';', cookieStart);
                if (cookieEnd == -1) {
                    cookieEnd = document.cookie.length;
                }
                cookieValue = decodeURIComponent(
                    document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
            }
            return cookieValue;
        }
    </script>
</body>
</html>